<?php
$p = \Yii::$app->controller->module->templateAsset."/gongxifacai/";
?>

 
<style type="text/css">

.showwords 
{
    font-size: 20px;
    color: white;
    position: absolute;
    z-index: 1;
    top: 85%;
    margin: -39px;
    left: 39px;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
/*     background-color: rgba(255, 255, 255, 0.53);*/
    text-shadow: 2px 2px 2px black, -2px -2px 2px black, 2px -2px 2px black, -2px 2px 2px black;
    font-weight: bold;
    letter-spacing: 6px;
}

*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    background-color: black;
}

#container
{
    width: 500px;
    height: 815px;
    position: absolute;
    overflow: hidden;
}
#container > img,#container > div
{
    position: absolute;
}
.titlebg
{
    width: 378px;
    height: 199px;
    background-color: #fff;
    opacity: 0.5;
    position: absolute;

}
#titlebg1
{
    left: 47px;
    top: 225px;
    opacity: 0;
}
#titlebg2
{
    left: 80px;
    top: 260px;
    opacity: 0;
}
#cover
{
    opacity: 0;
}
#page1 > div , #page1 > img
{
    position: absolute;
}
#qian1
{
    -webkit-transform: translate(0px,0px) rotate(90deg);
    left: 95px;
    top: 901px;
    opacity: 0;
}
#qian2
{
    left: 463px;
    top: 356px;
    -webkit-transform: rotate(-86deg);
    -webkit-transform-origin: 74% 250%;
    width: 280px;
    opacity: 0;
}
#qian3
{
    left: -255px;
    top: 294px;
    -webkit-transform: rotate(116deg);
    -webkit-transform-origin: 63% 400%;
    width: 230px;
    opacity: 0;
}
#qian4
{
    left: -245px;
    top: 330px;
    -webkit-transform: rotate(-6deg);
    -webkit-transform-origin: 29% 433%;
    width: 250px;
    opacity: 0;
}
#div11v,#div21v
{
    width: 270px;
    height: 377px;
    border: 7px solid #fff;
    left: 85px;
    top: 323px;
    position: absolute;
    display: none;
}
#div11h,#div21h
{
    width: 320px;
    height: 250px;
    border: 7px solid #fff;
    left: 80px;
    top: 400px;
    position: absolute;
    display: none;
}
#div12v,#div22v
{
    width: 270px;
    height: 377px;
    border: 7px solid #fff;
    left: 189px;
    top: 35px;
    position: absolute;
    /*-webkit-transform: translate(0px,0px) rotate(-90deg);*/
    display: none;
}
#div12h,#div22h
{
    width: 320px;
    height: 250px;
    border: 7px solid #fff;
    left: 139px;
    top: 75px;
    position: absolute;
    display: none;
    /*-webkit-transform: translate(0px,0px) rotate(-90deg);*/

}
.dai1
{
    position: absolute;
    left: 42px;
    top: -25px;
}
.dai2
{
    left: 2px;
    top: 48px;
    position: absolute;
}
#zi
{
    position: absolute;
    left: 22px;
    top: 85px;
    width: 49px;
    height: 49px;
    overflow: hidden;
    border-radius: 35px;
}
#banka
{
    position: absolute;
    left: 3px;
    top: 5px;
    -webkit-transform: translate(50px,0px);
    /*-webkit-animation: bankaka 8s linear infinite;*/

}
#fudai
{
    left: 50px;
    width: 94px;
    height: 145px;
    -webkit-transform: scale(-1,1);
}
#zhanshang
{
    left: 0px;
    top: 0px;
    width: 49px;
    border-radius: 25px;
    position: absolute;
    -webkit-transform: scale(-1,1);
}
</style>

<style type="text/css">
@-webkit-keyframes bankaka
{
    from  {-webkit-transform: translate(50px,0px);}
    to    {-webkit-transform: translate(-342px,0px);}
}
@-webkit-keyframes rotating
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    to    {-webkit-transform: translate(0px,1100px) rotate(40deg);}
}
@-webkit-keyframes title1_in
{
    from  {-webkit-transform: translate(-200px,-150px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 0.5}
}
@-webkit-keyframes title2_in
{
    from  {-webkit-transform: translate(200px,150px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 0.5}

}
@-webkit-keyframes colorchange
{
    0%   {color: rgba(255,255,255,0);}
    50%  {color: rgba(255,255,255,1);}
    100% {color: rgba(146,51,77,1);}
}
@-webkit-keyframes title1
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,7px);}
}
@-webkit-keyframes title1_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 0.5}
    to    {-webkit-transform: translate(300px,0px);opacity: 0}
}
@-webkit-keyframes title2
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,-7px);}
}
@-webkit-keyframes title2_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 0.5}
    to    {-webkit-transform: translate(-300px,0px);opacity: 0}
}
@-webkit-keyframes fadeout
{
    from  {opacity: 1}
    to    {opacity: 0}
}
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}
@-webkit-keyframes qian1
{
    from  {-webkit-transform: rotate(90deg);}
    to    {-webkit-transform: translate(-446px,-1141px) rotate(65deg);}
}
@-webkit-keyframes qian2
{
    from  {-webkit-transform: rotate(-86deg);}
    to    {-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes qian3
{
    from  {-webkit-transform: rotate(116deg);}
    to    {-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes qian4
{
    from  {-webkit-transform: rotate(89deg);}
    to    {-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes div11_in
{
    0%   {-webkit-transform: translate(100px,0px) rotate(90deg);-webkit-animation-timing-function: cubic-bezier(.49,.85,.43,1.01);}
    50%  {-webkit-transform: translate(0px,0px) rotate(0deg);-webkit-animation-timing-function: cubic-bezier(.72,.02,.75,.42);}
    100% {-webkit-transform: translate(-100px,0px) rotate(-90deg);}
}
@-webkit-keyframes con11_in
{
    0%   {-webkit-transform: translate(0px,400px);-webkit-animation-timing-function: cubic-bezier(.49,.85,.43,1.01);}
    50%  {-webkit-transform: translate(0px,0px);-webkit-animation-timing-function: cubic-bezier(.72,.02,.75,.42);}
    100% {-webkit-transform: translate(0px,400px);}
}
@-webkit-keyframes div12_in
{
    0%   {-webkit-transform: translate(-109px,727px) rotate(-180deg);-webkit-animation-timing-function: cubic-bezier(.49,.85,.43,1.01);}
    50%  {-webkit-transform: translate(0px,0px) rotate(0deg);-webkit-animation-timing-function: cubic-bezier(.72,.02,.75,.42);}
    100% {-webkit-transform: translate(455px,160px) rotate(102deg);}
}
@-webkit-keyframes div21_in
{
    0%   {-webkit-transform: translate(100px,400px) rotate(90deg);-webkit-animation-timing-function: cubic-bezier(.49,.85,.43,1.01);}
    50%  {-webkit-transform: translate(0px,0px) rotate(0deg);-webkit-animation-timing-function: cubic-bezier(.72,.02,.75,.42);}
    100% {-webkit-transform: translate(-400px,0px) rotate(-90deg);}
}
@-webkit-keyframes div22_in
{
    0%   {-webkit-transform: translate(-109px,727px) rotate(-180deg);-webkit-animation-timing-function: cubic-bezier(.49,.85,.43,1.01);}
    50%  {-webkit-transform: translate(0px,0px) rotate(0deg);-webkit-animation-timing-function: cubic-bezier(.72,.02,.75,.42);}
    100% {-webkit-transform: translate(455px,-460px) rotate(102deg);}
}
@-webkit-keyframes daizhuan
{
    0%    {-webkit-transform: scale(-1,1);}
    50%   {-webkit-transform: scale(0,1);}
    100%  {-webkit-transform: scale(1,1);}
}
</style>

<div id='container'>
    <img src='<?=$p?>images/bg.jpg'>

    <div id='qiandiv'>
    </div>
    <img src='<?=$p?>images/TB2cpmbaPnyQeBjSspbXXazUXXa_!!1016194477.png'>

    <div id='title1'>
        <div id='titlebg1' class='titlebg'>
        </div>
    </div>
    <div id='title2'>
        <div id='titlebg2' class='titlebg'>
        </div>
    </div>
    <div id='pagetitle' style="position:absolute;width:303px;height:134px;left:100px;top: 278px;overflow:hidden;display:table;">
        <div id="titlecontent" style="width:303px;height:134px;vertical-align:middle;display:table-cell;text-align:center;font-size: 28px;line-height: 40px;color: #92334D;opacity:0.9;"></div>
    </div> 


    <div id='page1'>

        <div id='con11'>
            <div id='div11v'><span id='word11v' class='showwords'></span></div>
            <div id='div11h'><span id='word11h' class='showwords'></span></div>
        </div>
        <div id='div12v'><span id='word12v' class='showwords'></span></div>
        <div id='div12h'><span id='word12h' class='showwords'></span></div>


        <div id='div21v'><span id='word21v' class='showwords'></span></div>
        <div id='div21h'><span id='word21h' class='showwords'></span></div>
        <div id='div22v'><span id='word22v' class='showwords'></span></div>
        <div id='div22h'><span id='word22h' class='showwords'></span></div>

        <img id='qian1' src='<?=$p?>images/TB2D_R.aR6xQeBjSszgXXXGPFXa_!!1016194477.png'>
        <img id='qian2' src='<?=$p?>images/TB2RTX_aGzyQeBjSszfXXX7OVXa_!!1016194477.png'>
        <img id='qian3' src='<?=$p?>images/TB2rk09aRTxQeBjSspkXXXtMpXa_!!1016194477.png'>
        <img id='qian4' src='<?=$p?>images/TB2bCycaR_xQeBjy0FcXXaBfXXa_!!1016194477.png'>
    </div>

    <img id='cover' src='<?=$p?>images/TB2ff8.aR_xQeBjy0FhXXbAoFXa_!!1016194477.png'>
 <div id='fudai' style='display:none' >
        <img class='dai1' src='<?=$p?>images/TB26wGbaKLyQeBjy1XaXXcexFXa_!!1016194477.png'>
        <img class='dai2' src='<?=$p?>images/TB2GwGkaKTyQeBjSspaXXcjjFXa_!!1016194477.png'>
        <div id='zi'>
            <img id='banka' src='<?=$p?>images/TB27wzAXNvzQeBjSZFAXXaF9VXa_!!1016194477.png'>
            <img id='zhanshang' src='<?=$p?>images/TB2JmSmaRPxQeBjy1XcXXXHzVXa_!!1016194477.jpg'>
        </div>
    </div>
</div>


<script>
function id(name)
{
    return document.getElementById(name);
}

function rand(min,max)
{
    return min+Math.floor(Math.random()*(max-min+1));
}

function showmoney()
{
    var container = id('qiandiv');
    for(var i = 0; i < 40; i++)
    {
        var div = document.createElement('div');
        div.style.width = '292px';
        div.style.height = '145px';
        div.style.position = 'absolute';
        var left = rand(-100,450);
        div.style.left = left + 'px';
        div.style.top = '-200px';

        var img = document.createElement('img');
        img.style.position = 'absolute';
        if(i % 2 == 0)
            img.src = '<?=$p?>images/TB2rk09aRTxQeBjSspkXXXtMpXa_!!1016194477.png';
        else
            img.src = '<?=$p?>images/TB2flWcaGbyQeBjy1XbXXa9yXXa_!!1016194477.png';

        var angle = rand(0,360);
        img.style.webkitTransform = 'rotate(' + angle + 'deg)';

        div.appendChild(img);
        var anitime = rand(10,15);
        div.style.webkitAnimation = 'rotating ' + anitime + 's ' + i*0.28 + 's linear infinite';

        container.appendChild(div);
    }


}

function showtitle()
{

    id('cover').style.webkitAnimation = 'fadein 1s linear both';

    id('titlebg1').style.webkitAnimation = 'title1_in 1.2s ease-out both';
    id('titlebg2').style.webkitAnimation = 'title2_in 1.2s ease-out both';
    id('titlecontent').innerHTML = desc;

    id('titlecontent').style.webkitAnimation = 'colorchange 0.8s 1s ease both';

    id('title1').style.webkitAnimation = 'title1 1s 1s linear infinite alternate';
    id('title2').style.webkitAnimation = 'title2 1s 1s linear infinite alternate';

}

function zimeitixifenbao()
{
    id('pagetitle').style.webkitAnimation = 'fadeout 0.3s linear both';
    id('titlebg1').style.webkitAnimation = 'title1_out 0.8s 0.3s linear both';
    id('titlebg2').style.webkitAnimation = 'title2_out 0.8s 0.3s linear both';

    id('fudai').style.webkitAnimation = 'daizhuan 1s linear both';

    id('qian1').style.opacity = 1;
    id('qian2').style.opacity = 1;
    id('qian3').style.opacity = 1;
    id('qian4').style.opacity = 1;

    timeout[1] = setTimeout(function()
    {
        id('zhanshang').style.display = 'none';
        id('banka').style.webkitAnimation = 'bankaka 8s 1s linear infinite';
    },500)

    // setTimeout(show1,1000)
    show1();
}

function show1()
{
    setImage('11');
    setImage('12');

    id('qian1').style.webkitAnimation = '';
    id('qian2').style.webkitAnimation = '';
    id('qian3').style.webkitAnimation = '';
    id('qian4').style.webkitAnimation = '';

    timeout[2] = setTimeout(function()
    {
        id('qian1').style.webkitAnimation = 'qian1 2s linear 0.3s both';
        id('qian2').style.webkitAnimation = 'qian2 2s linear 0.3s both';
        id('qian3').style.webkitAnimation = 'qian3 1.5s linear 0.3s both';
        id('qian4').style.webkitAnimation = 'qian4 2s linear 0.3s both';

        id('div21h').style.webkitAnimation = '';
        id('div21v').style.webkitAnimation = '';

        id('div22v').style.webkitAnimation = '';
        id('div22h').style.webkitAnimation = '';

        id('div21h').style.display = 'none';
        id('div21v').style.display = 'none';

        id('div22v').style.display = 'none';
        id('div22h').style.display = 'none';
    },100)


    id('div11h').style.webkitAnimation = 'div11_in 8s linear both';
    id('div11v').style.webkitAnimation = 'div11_in 8s linear both';
    id('con11').style.webkitAnimation = 'con11_in 8s linear both';

    id('div12v').style.webkitAnimation = 'div12_in 8s linear both';
    id('div12h').style.webkitAnimation = 'div12_in 8s linear both';

    timeout[3] = setTimeout(show2, 8000)
}

function show2()
{
    setImage('21');
    setImage('22');

    id('qian1').style.webkitAnimation = '';
    id('qian2').style.webkitAnimation = '';
    id('qian3').style.webkitAnimation = '';
    id('qian4').style.webkitAnimation = '';

    timeout[4] = setTimeout(function()
    {
        id('qian1').style.webkitAnimation = 'qian1 2s linear 0.3s both';
        id('qian2').style.webkitAnimation = 'qian2 2s linear 0.3s both';
        id('qian3').style.webkitAnimation = 'qian3 1.5s linear 0.3s both';
        id('qian4').style.webkitAnimation = 'qian4 2s linear 0.3s both';

        id('div11h').style.webkitAnimation = '';
        id('div11v').style.webkitAnimation = '';
        id('con11').style.webkitAnimation = '';

        id('div12v').style.webkitAnimation = '';
        id('div12h').style.webkitAnimation = '';

        id('div11h').style.display = 'none';
        id('div11v').style.display = 'none';

        id('div12v').style.display = 'none';
        id('div12h').style.display = 'none';
    },100)

    id('div21h').style.webkitAnimation = 'div21_in 8s linear both';
    id('div21v').style.webkitAnimation = 'div21_in 8s linear both';

    id('div22v').style.webkitAnimation = 'div22_in 8s linear both';
    id('div22h').style.webkitAnimation = 'div22_in 8s linear both';


    timeout[5] = setTimeout(show1, 8000)
}

var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=5000;
var timeout = [];
var showfont = false;



function id (name) 
{
    return document.getElementById(name);
}

//每次执行加载后6张图片
var bl_keepload = 'first';
var step_loadnum = 6;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
}

function loading()
{
    showmoney();
    load_images();
}

function load_images()
{ 
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    bl_keepload = 'first';
    step_load();     
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';

    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            zimeitixifenbao();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    zimeitixifenbao();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            zimeitixifenbao();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    zimeitixifenbao();
                },dis_titletime);
        }

    }
}

function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    var div;
    var div1;
    var img;

    if(img_bili > 1)
    {
        div = id('div'+idname + 'h');
        div1 = id('div'+idname + 'v');
        idname = idname + 'h';
        height = 250;
        width = 320;
    }
    else
    {
        div = id('div'+idname + 'v');
        div1 = id('div'+idname + 'h');
        idname = idname + 'v';
        width = 270;
        height = 377;
    }

    div.style.display = 'block';
    div1.style.display = 'none';


    var img = id('div'+idname);
    img.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
    console.log('setimg:'+ img.style.backgroundImage);

    //var word = id('word'+idname);
   // var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
    //if(word_string != undefined)
   // {
    //    word_string = word_string.replace(/[\n]/ig,'');
    //    var word_length = word_string.length;
        //word.style.top = "90%";
    //    if(word_length < 6)
     //       word.style.fontSize = "23px";
    //    else
      //  {
        //    word.style.fontSize = "20px";
        //    if(word_length > 10)
          //  {
         //       word.style.top =　"85%";
        //        if(img_bili > 1)  //heng
           //             word_string = insertEnter(word_string, 5);
         //       else
           //         word_string = insertEnter(word_string, 7);
          //  }
                    
       // }
      //  word.innerText = word_string;
   // }
    //else
   //{
   //    word.innerText = "";
   //}
    if(img_bili > (width/height))
    {
        img.style.backgroundSize = height*img_bili + 'px '+ height + 'px';
        img.style.backgroundPosition = -((height*img_bili-width)/2)+'px 0px';
    }
    else
    {
        img.style.backgroundSize = width + 'px '+ width/img_bili + 'px';
        img.style.backgroundPosition = '0px ' +(-((width/img_bili-height)/2)) + 'px';
    }
    image_url_index ++;
    if(image_url_index == Onload_imgs_url.length)
      image_url_index = 0;
}

function insertEnter(str,n){
    var len = str.length;
    var strTemp = '';
    if(len > n){
    strTemp = str.substring(0,n);
    str = str.substring(n,len);
    return strTemp+'\n'+str;
    }else{
    return str;
    }
}

var get_pid = function(url){
    var index1 = url.indexOf("?");
    if(index1 != -1)
    {
        url = url.substr(0, index1);
    }
    return url.toString().substr(url.lastIndexOf("/") + 1);
}

function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{
    for(var i=0;i<timeout.length;i++)
    {
        clearTimeout(timeout[i])
    }

    id('con11').style.webkitAnimation = '';
    id('div11h').style.webkitAnimation = '';
    id('div11v').style.webkitAnimation = '';
    id('con11').style.webkitAnimation = '';

    id('div12v').style.webkitAnimation = '';
    id('div12h').style.webkitAnimation = '';

    id('div11h').style.display = 'none';
    id('div11v').style.display = 'none';

    id('div12v').style.display = 'none';
    id('div12h').style.display = 'none';

    id('div21h').style.webkitAnimation = '';
    id('div21v').style.webkitAnimation = '';

    id('div22v').style.webkitAnimation = '';
    id('div22h').style.webkitAnimation = '';

    id('div21h').style.display = 'none';
    id('div21v').style.display = 'none';

    id('div22v').style.display = 'none';
    id('div22h').style.display = 'none';

    id('titlebg1').style.webkitAnimation = '';
    id('titlebg2').style.webkitAnimation = '';
    id('pagetitle').style.webkitAnimation = '';

}

call_me(loading);
</script>
